﻿@using ZBJF.Warranty.Common.Enums.Data
@using ZBJF.Warranty.WebProvider
@{
    ViewBag.Title = "Index";
}
@section Header{
    @Scripts.Render("~/bundles/datatable")
    @Styles.Render("~/Content/datatable")
}
<ul class="nav nav-tabs">
    <li class="active"><a href="/ProductModels/">型号列表</a></li>
    <li class="Add-R"><a  href="/ProductModels/Edit/0">添加型号</a></li>
</ul>
<form id="searchForm" class="breadcrumb form-search">
    <div>
        <label>品牌：</label>
        @Html.DropDownList("BrandId", ConvertToSelector.Instance.ProductBrandConvertToSelectList())
        <label>屏幕类型：</label>
        @Html.DropDownList("ScreenType", ConvertToSelector.Instance.EnumTypeConvertToSelectList(typeof(ScreenTypeEnum)))
        <label>是否可用：</label>
        @Html.DropDownList("IsAvailable", ConvertToSelector.Instance.InitSelectList(true), new { @class = "tag-input-style" })
        <label>关键词：</label><input id="Keyword" name="Keyword" class="input-medium" placeholder="请输入搜索关键词" type="text" value="" maxlength="50" />
        <input id="btnSubmit" class="btn btn-primary Search-R" type="button" value="查询" onclick="search();">
    </div>
</form>
<div class="table-responsive dataTables_wrapper">
    <table id="productModelsList" class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th width="20">序号</th>
                <th width="100">品牌名称</th>
                <th width="100">型号名称</th>
                <th width="100">屏幕类型</th>
                <th width="100">型号编码</th>
                <th width="100">图片</th>
                <th width="100">修改时间</th>
                <th width="80">排序</th>
                <th width="80">是否可用</th>
                <th width="100">操作</th>
            </tr>
        </thead>
    </table>
</div>
@section scripts{
    @Scripts.Render("~/Bundles/ImagePreview")
    <script type="text/javascript">
        var isSearch = false;
        $(function () {
            var objTable = $("#productModelsList")
                .dataTable({
                    fnDrawCallback: function () {
                        ControlPermissionOperate();
                    },
                    "sAjaxSource": "/ProductModels",
                    aoColumns: [
                        {
                            "mData": null, "bSortable": false, "fnRender": function (nRow) {
                                return nRow.iDataRow + 1;
                            }
                        },
                        { "mData": "BrandName", "bSortable": false },
                        {
                            "mData": "ModelName", "bSortable": false, "fnRender": function (nRow) {
                                return "<a class='Edit-R' href='/ProductModels/Edit/" + nRow.aData.ID + "' title='edit'>" + nRow.aData.ModelName + "</a>";
                            }
                        },
                        { "mData": "ScreenTypeName", "bSortable": false },
                        { "mData": "ModelCode", "bSortable": false },
                        {
                            "mData": "ImgUrl", "bSortable": false, "fnRender": function (nRow) {
                                if (nRow.aData.ImgUrl && nRow.aData.ImgUrl !== '')
                                    //return "<img class='img-thumbnail small preview' src='" + nRow.aData.ImgUrl + "'/>";
                                    return "<a class='Edit-R' href='javascript:;' onclick='showImageLayer(this)' imgUrl='" + nRow.aData.ImgUrl + "' title='查看图片'>查看图片</a>";
                                else {
                                    return "";
                                }
                            }
                        },
                        { "mData": "LastModifyTime" },
                        { "mData": "Sort" },
                         { "mData": "IsAvailable" },
                        { "mData": "ID", "bSortable": false }
                    ],
                    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                        $('td:eq(8)', nRow).html(aData.IsAvailable ? bootStrapOkIncon : bootStrapRemoveIncon);
                        var html = "<a class='Edit-R' href='/ProductModels/Edit/" + aData.ID + "' title='edit'><i class='icon-edit'></i></a>";
                        html += "<a class='Edit-R' href=\"javascript:UpdateStatus('" + aData.ID + "'," + !aData.IsAvailable + ",'/ProductModels/UpdateStatus','productModelsList')\" title='" + (aData.IsAvailable ? "禁用" : "启用") + "'>" + (aData.IsAvailable ? bootStrapRemoveIncon : bootStrapOkIncon) + "</a>";
                        $('td:eq(9)', nRow).html(html);
                    }
                });
            imgPreview();
        });

        function imgPreview() {
            setTimeout(function () { $("img.preview").preview(); }, 500);
        }
        function search() {
            /*给查询对象赋值*/
            queryParamList.Keyword = ($("#Keyword").val()).trim();
            queryParamList.BrandId = ($("#BrandId").val()).trim();
            queryParamList.ScreenType = $("#ScreenType").val();
            queryParamList.IsAvailable = $("#IsAvailable").val();
            $("#productModelsList").dataTable().fnDraw();
            imgPreview();
        }

        //图片查看
        function showImageLayer(_this) {
            var _imgUrl = $(_this).attr("imgUrl");
            _imgUrl = encodeURIComponent(_imgUrl);
            layer.open({
                type: 2,
                title: '查看图片',
                shadeClose: true,
                shade: 0.8,
                area: ['820px', '540px'],
                content: '/ImageLook.html?imgUrl=' + _imgUrl //iframe的url
            });
        }
    </script>
}


